<template>
  <div class="myFriendsItem">
    <Avatar class="AvatarItem" :AvatarUrl="player.pictures" :index="index"></Avatar>
    <div class="correctNumRnak">
      <div style="height:0.08rem;"></div>
      <span class="palyerName">{{player.cnName}}<span v-if="player.cnName && player.enName">-</span>{{player.enName}}{{(player.cnName === '' && player.enName === '') ? player.loginName.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3") : ''}}</span>
      <div class="correctNum">
        <span class="text">历史最高答题数</span>
        <span class="correctNumDetali">{{player.allCorrectAnswer}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import Avatar from './Avatar'
export default {
  name: 'myFriendsItem',
  data () {
    return {
      key: 'value'
    }
  },
  components: {
    Avatar
  },
  props: {
    player: {
      type: Object
    },
    index: {
      type: Number
    }
  },
  methods: {
  }
}
</script>

<style scoped>
.myFriendsItem{
  width: 90%;
  height:100%;
  display: flex;
  margin-left: 5%;
}
.AvatarItem{
  height:100%;
  margin-left:0.1rem;
}
.rankIndex,.rankIndex1{
  width:10%;
  font-size: 0.5rem;
  font-style: italic;
  color: white;
  font-weight: bold;
  font-family: Consolas, Monaco, monospace;
  -webkit-text-stroke: 1px red;
}
.rankIndex1{
  text-indent: 0.25rem;
}
.palyerName{
  width: 40%;
  font-size: 0.26rem;
  color:#7A585C;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  text-align: left;
}
.correctNum{
  color: #AA8A8A;
  font-size: 0.26rem;
  /* text-indent: 1em; */
}
.correctNum p {
  height: 0.9rem;
  display: flex;
  justify-content: center;
}
.text{
  text-indent: 1em;
  font-size: 0.22rem;
  /* line-height: 0.9rem; */
}
.correctNumDetali{
  color: #FE667B;
  font-size: 0.26rem;
  text-indent: 0.3em;
  /* line-height: 0.9rem; */
}
.myFriendsList .myFriendsItem .AvatarItem{
  margin-right: 0.3rem;
}
.answerRecord .palyerName {
  width: 100%;
  font-size: 0.26rem;
  color: #7A585C;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  display: block;
}
</style>
